<template>
  <div>
    <Spin fix v-if="showLoading">
      <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
      <div>加载中</div>
    </Spin>
    <div ref="topDiv" class="page ql-editor" v-if="showRouterView">
      <p class="artical_title">{{ articalInfo.worksTitle }}</p>
      <p class="artical_info">{{ articalInfo.worksTypeName }} | {{ articalInfo.browse }}次浏览 |
        发布时间：{{ articalInfo.createDate }} | 发布人：{{ articalInfo.createUserName }} | 所属单位：{{ articalInfo.orgName }}</p>
      <div class="artical_content " v-html="articalInfo.tpshow"></div>
      <div v-for="(item,index) in imgs">
        <img class="artical_img" :src="item.picture"/>
      </div>
      <!--        <p class="artical_content">{{articalInfo.worksContent}}</p>-->
      <div class="page_two_right_child" @click="clickThumb()" v-bind:class="{thumbStatus:articalInfo.thumbsStatus==1}">
        <Icon class="page_two_right_child_icon" type="ios-thumbs-up-outline"
              v-bind:class="{thumbContentStatus:articalInfo.thumbsStatus==1}"/>
        <label class="page_two_right_child_label"
               v-bind:class="{thumbContentStatus:articalInfo.thumbsStatus==1}">{{ articalInfo.thumbs }}</label>
      </div>
      <div class="page_three">
        <p class="page_three_line"></p>
        <label class="page_three_label">相关文章</label>
      </div>
      <div class="page_four">
        <div class="page_four_single" v-for="item in relateInfos" @click="toViewArtical(item.id)">
          <img class="page_four_img" :src="item.cover" style="cursor: pointer;"/>
          <p class="page_four_text">{{ item.worksTitle }}</p>
        </div>
      </div>
      <div class="down_info">
        <p class="down_red_line_4">一</p>
        <p class="down_red_line_1">一</p>
      </div>
    </div>

  </div>

</template>

<script>

import {Api} from '../../../api/index.js'
import {sessionStorage} from '../../../common/cacheUtils.js';

export default {

  data() {
    return {
      showLoading: false,
      showRouterView: true,
      imgs: [],
      articalInfo: {},
      relateInfos: []
    }
  },
  mounted() {
    this.$refs.topDiv.style.height = (window.innerHeight - 120) + 'px';
    this.query(this.$route.query.id);
    window.addEventListener('scroll', this.scrollToTop);
  },
  destroyed() {
    window.removeEventListener('scroll', this.scrollToTop)
  },
  methods: {
    query(id) {
      this.showLoading = true;
      this.$http.get(Api.queryWorkById + "/" + id).then(res => {
        this.showLoading = false;
        this.articalInfo = res.data.data[0];
        this.articalInfo.createDate = this.formatDate(new Date(this.articalInfo.createDate), 'yyyy-MM-dd');
        if (this.articalInfo.worksType == '0')
          this.articalInfo.worksTypeName = "图片"
        else if (this.articalInfo.worksType == '1')
          this.articalInfo.worksTypeName = "视频"
        if (this.articalInfo.worksType == '2')
          this.articalInfo.worksTypeName = "图文"
        this.$http.get(Api.interestedPartiesUserFile + "/" + id + "/files/picture").then((res) => {
          if (res.data.result == "success") {
            this.imgs = res.data.data;
          }
        }).catch(e => {
          this.showLoading = false;
          this.$Message.error("文件读取失败");
        });
        //this.$http.get(Api.queryWorks+"?activityId="+this.articalInfo.activityId+"&startPage=1&size=4&worksType=0&activityThemeId="+this.articalInfo.activityId).then(res => {
        this.$http.get(Api.queryWorks + "?activityId=" + this.articalInfo.activityId + "&startPage=1&size=4&worksType=0").then(res => {
          this.relateInfos = res.data.data.data;
          this.relateInfos.forEach(item => {
            this.$http.get(Api.interestedPartiesUserFile + "/" + item.id + "/files/picture").then((res1) => {
              if (res1.data.data.length > 0)
                this.$set(item, "cover", res1.data.data[0].picture)
            }).catch(e => {
            });
          });

        }).catch(e => {
        });
      }).catch(e => {
        this.$Message.error("数据获取失败")
      });
    },
    clickThumb(index) {
      let userId = sessionStorage('userId').getObject('userId').userId;
      this.$http.get(Api.clickThumb + "?worksId=" + this.articalInfo.id + "&userId=" + userId).then(res => {
        if (res.data.status == 200) {
          this.articalInfo.thumbsStatus = res.data.data
          if (this.articalInfo.thumbsStatus == '1') {
            this.articalInfo.thumbs++;
          } else {
            this.articalInfo.thumbs--;
          }
        }
      })
    },
    toViewArtical(fileId) {
      let routeUrl = this.$router.resolve({
        path: "/articalPlay",
        query: {id: fileId}
      });
      window.open(routeUrl.href, '_blank');
    },
    // 点击图片回到顶部方法，加计时器是为了过渡顺滑
    backTop() {
      const that = this
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
        if (that.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 16)
    },

    // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
    scrollToTop() {
      const that = this
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      that.scrollTop = scrollTop
      if (that.scrollTop > 60) {
        that.btnFlag = true
      } else {
        that.btnFlag = false
      }
    },
    formatDate(date, fmt) {
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
      }
      let o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
      };
      for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
          let str = o[k] + '';
          fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str));
        }
      }
      return fmt;
    },
    padLeftZero(str) {
      return ('00' + str).substr(str.length);
    },
  }
}

</script>


<style scoped>

.page {
  background-color: #fff;
  min-width: 1250px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.artical_title {
  margin-top: 58px;
  font-size: 24px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #333333;
  line-height: 38px;
}

.artical_info {
  margin-top: 25px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #757575;
  line-height: 38px;
}

.artical_img {
  margin-top: 54px;
  width: 500px;
  height: 312px;
}

.artical_content {
  width: 1100px;
  text-indent: 25px;
  margin-top: 45px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  line-height: 38px;
}

.video-player-box {
  width: 1200px;
  height: 100%;
  background: #BEBEBE;
}

.page_two {
  width: 1200px;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page_two_left {
  font-size: 24px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #333333;
  height: 75px;
  line-height: 75px;
}

.page_two_right {
  display: flex;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #757575;
}

.page_two_right_left_child {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #757575;
}

.page_two_right >>> .ivu-breadcrumb > span:last-child {
  font-weight: 400;
  color: #757575;
}

.page_two_right_child {
  margin-left: 1000px;
  width: 67px;
  height: 24px;
  border: 1px solid #F44336;
  border-radius: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page_two_right_child_icon {
  color: #D80200;
}

.page_two_right_child_label {
  margin-left: 10px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #D80200;
}

.page_three {
  display: flex;
  align-items: center;
  margin-bottom: 23px;
  margin-top: 25px;
}

.page_three_line {
  width: 5px;
  height: 20px;
  background: #D80200;
  border-radius: 3px;
}

.page_three_label {
  width: 1185px;
  margin-left: 10px;

  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
}

.page_four {
  width: 1200px;
  display: flex;
  justify-content: space-between;
}

.page_four_single {
  height: 178px;
  width: 224px;
  display: flex;
  flex-direction: column;
}

.page_four_img {
  width: 224px;
  height: 140px;
  background: #BDBDBE;
  border-radius: 4px;
}

.page_four_text {
  width: 220px;
  font-size: 14px;
  line-height: 38px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}


.down_info {
  display: flex;
  flex-direction: column;
  height: 200px;
}

.down_red_line_4 {
  margin-top: 48px;
  width: 1200px;
  height: 4px;
  color: white;
  background-color: red;
}

.down_red_line_1 {
  margin-top: 3px;
  width: 1200px;
  height: 1px;
  color: white;
  background-color: red;
}

.down_company_info {
  margin: 24px;
  width: 1200px;
  height: 24px;
  text-align: center;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ADADAD;
  line-height: 24px;
}

.thumbStatus {
  background-color: red;
  color: red;
}

.thumbContentStatus {
  color: #fff;
}
.tableClass {
}

.tableClass >>> .ivu-table td {
  vertical-align: middle;
}

.tableClass >>> .ivu-table th {
  vertical-align: middle;
}

.tableClass >>> .ivu-input-suffix i {
  font-size: 16px;
  line-height: 50px;
  color: #808695;
}

.tableClass >>> .ivu-input {
  border-radius: 0px;
  vertical-align: middle;
  height: 100%;
}

.tableClass >>> textarea.ivu-input {
  height: 100%;
  vertical-align: middle;
}

.tableClass >>> ivu-date-picker {
  height: 100%;
  vertical-align: middle;
}

.tableClass >>> .ivu-table-cell {
  padding-left: 0px;
  padding-right: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  box-sizing: border-box;
  height: 100%;
  /*flex 布局*/
  display: flex;
  /*实现垂直居中*/
  align-items: center;
  /*实现水平居中*/
  justify-content: center;
  text-align: justify;
}

.tableClass >>> .ivu-date-picker {
  height: 100%;
}

.tableClass >>> .ivu-date-picker {
  height: 100%;
}

.tableClass >>> .ivu-input-wrapper {
  height: 100%;
}

.tableClass >>> .ivu-date-picker-rel {
  height: 100%;
}

.tableClass >>> .ivu-input-icon {
  line-height: 50px;
}

.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}

@keyframes ani-demo-spin {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
